<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">utils/html-helper.js | API</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<link rel="stylesheet" href="./inject/css/0-vue.css"><link rel="stylesheet" href="./inject/css/0-app.css"><link rel="stylesheet" href="./inject/css/0-esdoc.css"><script src="./inject/script/0-custom.js"></script><meta name="description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="API"><meta property="twitter:description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/easysoft/xuanxuan.git"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/color.js~Color.html">Color</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/delay-action.js~DelayAction.html">DelayAction</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/status.js~Status.html">Status</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/status.js~StatusKeeper.html">StatusKeeper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/task-queue.js~TaskQueue.html">TaskQueue</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createDate">createDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createPhpTimestramp">createPhpTimestramp</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatDate">formatDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatSpan">formatSpan</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getTimeBeforeDesc">getTimeBeforeDesc</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isSameDay">isSameDay</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isSameMonth">isSameMonth</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isSameYear">isSameYear</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isToday">isToday</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isYestoday">isYestoday</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-classes">classes</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-escape">escape</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getSearchParam">getSearchParam</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isWebUrl">isWebUrl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-linkify">linkify</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-rem">rem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-strip">strip</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-cutImage">cutImage</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getImageInfo">getImageInfo</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-limittimepromise">limittimepromise</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-mdifileicon">mdifileicon</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-pinyin">pinyin</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-plain">plain</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-matchScore">matchScore</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatKeyDecoration">formatKeyDecoration</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getKeyDecoration">getKeyDecoration</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isOnlyModifyKeys">isOnlyModifyKeys</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getCodeFromString">getCodeFromString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-longShadow">longShadow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-skinStyle">skinStyle</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-sortList">sortList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-clearStore">clearStore</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getStoreItem">getStoreItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getStoreLength">getStoreLength</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeStoreItem">removeStoreItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-setStoreItem">setStoreItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-storeForEach">storeForEach</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-storeGetAll">storeGetAll</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatBytes">formatBytes</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatString">formatString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-ifEmptyStringThen">ifEmptyStringThen</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isEmptyString">isEmptyString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isNotEmptyString">isNotEmptyString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-timesequence">timesequence</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-TIME_DAY">TIME_DAY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-renderer">renderer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-fileIcons">fileIcons</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-BYTE_UNITS">BYTE_UNITS</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">utils/html-helper.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/** @module html-helper */

/**
 * &#x62FC;&#x63A5;&#x5143;&#x7D20;&#x7C7B;
 * @param {...any} &#x53C2;&#x6570;
 * @return {string}
 * @function
 * @example
 * const isActive = false;
 * const isHidden = true;
 * const divClass = classes(&apos;btn&apos;, [&apos;lg&apos;, &apos;flex-none&apos;], {active: isActive, &apos;is-hidden&apos;: isHidden});
 * // &#x4EE5;&#x4E0A; divClass &#x6700;&#x7EC8;&#x503C;&#x4E3A; &apos;btn lg flex-none is-hidden&apos;
 */
export const classes = (...args) =&gt; (
    args.map(arg =&gt; {
        if (Array.isArray(arg)) {
            return classes(arg);
        }
        if (arg !== null &amp;&amp; typeof arg === &apos;object&apos;) {
            return Object.keys(arg).filter(className =&gt; {
                const condition = arg[className];
                if (typeof condition === &apos;function&apos;) {
                    return !!condition();
                }
                return !!condition;
            }).join(&apos; &apos;);
        }
        return arg;
    }).filter(x =&gt; (typeof x === &apos;string&apos;) &amp;&amp; x.length).join(&apos; &apos;)
);

/**
 * &#x5C06;&#x50CF;&#x7D20;&#x5355;&#x4F4D;&#x8F6C;&#x6362;&#x4E3A; rem &#x5355;&#x4F4D;
 * @param {number} value &#x50CF;&#x7D20;&#x5355;&#x4F4D;&#x503C;
 * @param {number} [rootValue=20] `1rem` &#x5355;&#x4F4D;&#x5BF9;&#x5E94;&#x5BF9;&#x50CF;&#x7D20;&#x503C;
 * @return {string}
 * @function
 * @example
 * const width = rem(100);
 */
export const rem = (value, rootValue = 20) =&gt; (`${value / rootValue}rem`);

/**
 * &#x83B7;&#x53D6;&#x6D4F;&#x89C8;&#x5668;&#x67E5;&#x8BE2;&#x5B57;&#x7B26;&#x4E32;&#x952E;&#x503C;
 * @param {?string} [key=null] &#x8981;&#x83B7;&#x53D6;&#x503C;&#x7684;&#x952E;&#x540D;&#xFF0C;&#x5982;&#x679C;&#x7559;&#x7A7A;&#x5219;&#x4EE5; `Object` &#x8FD4;&#x56DE;&#x6240;&#x6709;&#x952E;&#x503C;&#x5BF9;
 * @param {?string} [search=null] &#x67E5;&#x8BE2;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x5982;&#x679C;&#x7559;&#x7A7A;&#x5219;&#x4F7F;&#x7528;&#x5F53;&#x524D;&#x6D4F;&#x89C8;&#x5668;&#x5730;&#x5740;&#x4E0A;&#x7684;&#x67E5;&#x8BE2;&#x5B57;&#x7B26;&#x4E32;
 * @return {string|Object.&lt;string, string&gt;}
 * @function
 */
export const getSearchParam = (key = null, search = null) =&gt; {
    const params = {};
    search = search === null ? window.location.search : search;
    if (search.length &gt; 1) {
        if (search[0] === &apos;?&apos;) {
            search = search.substr(1);
        }
        const searchArr = search.split(&apos;&amp;&apos;);
        for (const pair of searchArr) {
            const pairValues = pair.split(&apos;=&apos;, 2);
            if (pairValues.length &gt; 1) {
                try {
                    params[pairValues[0]] = decodeURIComponent(pairValues[1]);
                } catch (_) {
                    if (DEBUG) {
                        console.error(_, {key, search});
                    }
                    params[pairValues[0]] = &apos;&apos;;
                }
            } else {
                params[pairValues[0]] = &apos;&apos;;
            }
        }
    }
    return key ? params[key] : params;
};

/**
 * &#x8FC7;&#x6EE4;&#x6389; HTML &#x6807;&#x7B7E;
 * @param {string} html HTML &#x6E90;&#x7801;
 * @return {string}
 * @function
 */
export const strip = html =&gt; {
    return html.replace(/&lt;(?:.|\n)*?&gt;/gm, &apos;&apos;);
};

/**
 * &#x8F6C;&#x6362; HTML &#x6807;&#x7B7E;
 * @param {string} html HTML &#x6E90;&#x7801;
 * @return {string}
 * @function
 */
export const escape = html =&gt; {
    const tmp = document.createElement(&apos;DIV&apos;);
    tmp.innerText = html;
    return tmp.innerHTML || &apos;&apos;;
};

/**
 * &#x5224;&#x5B9A;&#x7ED9;&#x5B9A;&#x5BF9;&#x5B57;&#x7B26;&#x4E32;&#x662F;&#x5426;&#x662F;&#x7F51;&#x5740;
 * @param {string} url &#x5B57;&#x7B26;&#x4E32;
 * @return {boolean}
 * @function
 */
export const isWebUrl = url =&gt; {
    if (typeof url !== &apos;string&apos;) {
        return false;
    }
    return (/^(https?):\/\/[-A-Za-z0-9\u4e00-\u9fa5+&amp;@#/%?=~_|!:,.;]+[-A-Za-z0-9\u4e00-\u9fa5+&amp;@#/%=~_|]$/ig).test(url);
};

/**
 * &#x5C06;&#x5B57;&#x7B26;&#x4E32;&#x5185;&#x7684;&#x94FE;&#x63A5;&#x8F6C;&#x6362;&#x4E3A; HTML &#x94FE;&#x63A5;&#x5F62;&#x5F0F;
 * @param {string} text &#x5B57;&#x7B26;&#x4E32;
 * @return {string}
 * @function
 */
export const linkify = (text) =&gt; {
    return (text || &apos;&apos;).replace(
        /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
        (match, space, url) =&gt; {
            let hyperlink = url;
            if (!hyperlink.match(&apos;^https?://&apos;)) {
                hyperlink = `http://${hyperlink}`;
            }
            return `${space}&lt;a href=&quot;${hyperlink}&quot;&gt;${url}&lt;/a&gt;`;
        }
    );
};

export default {
    classes,
    rem,
    getSearchParam,
    strip,
    isWebUrl,
};
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
